<template>
  <div class="order-container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索订单号"
          style="width: 300px"
          @keyup.enter.native="searchOrders"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchOrders" />
        </el-input>
      </div>
      
      <el-table :data="orderList" border>
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="220"
          sortable
        />
        <el-table-column 
          prop="orderName" 
          label="订单名称"
          width="200"
        />

        <el-table-column prop="userName" label="用户" />
        <el-table-column label="金额" width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="statusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-drawer
      :visible.sync="showDetail"
      direction="rtl"
      size="50%"
      :with-header="false"
      custom-class="order-drawer">
      <div class="drawer-header">
        <h3>订单详情</h3>
        <el-button icon="el-icon-close" circle @click="showDetail = false"/>
      </div>
      <div v-if="selectedOrder" class="order-detail">
        <h3>{{ selectedOrder.orderName }}</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单号">{{ selectedOrder.orderNumber }}</el-descriptions-item>
          <el-descriptions-item label="下单用户">{{ selectedOrder.userName }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">￥{{ selectedOrder.amount }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="statusType(selectedOrder.status)">{{ selectedOrder.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ selectedOrder.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      orderList: [],
      showDetail: false,
      selectedOrder: null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    statusType(status) {
      const types = {
        '待付款': 'warning',
        '已发货': 'success',
        '已完成': 'info',
        '已取消': 'danger'
      }
      return types[status] || 'info'
    },
    loadData() {
      // 模拟订单数据
      this.orderList = [
        {
          id: '1',
          orderNumber: '202308210001',
          userName: '张三',
          amount: 599,
          status: '已发货',
          createTime: '2023-08-21 14:30:00'
        },
        // 更多测试数据...
      ]
      this.total = this.orderList.length
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    },
    handleDetail(row) {
      this.selectedOrder = row;
      this.showDetail = true;
    },
    handleDelete(row) {
      // 模拟根据 row.id 删除订单逻辑
      this.orderList = this.orderList.filter(order => order.id !== row.id);
    }
  }
}
</script>

<style scoped>
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.order-detail {
  padding: 20px;
}
</style>
